<template>
    <div ref="chartRef" style="height: 100%; width: 100%"></div>
  </template>
  
  <script setup>
  import { ref, onMounted, watch } from 'vue'
  import * as echarts from 'echarts'
  
  const props = defineProps({
    chartData: Object
  })
  
  const chartRef = ref(null)
  let chartInstance = null
  
  const initChart = () => {
    chartInstance = echarts.init(chartRef.value)
    
    const option = {
      tooltip: {
        trigger: 'axis'
      },
      xAxis: {
        type: 'category',
        data: props.chartData.labels
      },
      yAxis: {
        type: 'value'
      },
      series: [{
        data: props.chartData.datasets[0].data,
        type: 'line',
        smooth: true,
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(64, 158, 255, 0.7)'
            }, {
              offset: 1,
              color: 'rgba(64, 158, 255, 0)'
            }]
          }
        }
      }]
    }
  
    chartInstance.setOption(option)
  }
  
  onMounted(() => {
    initChart()
    window.addEventListener('resize', () => chartInstance.resize())
  })
  
  watch(() => props.chartData, () => {
    chartInstance.setOption({
      xAxis: { data: props.chartData.labels },
      series: { data: props.chartData.datasets[0].data }
    })
  })
  </script>